<template>
	<el-dialog title="系统图标库" v-model="dialogVisible" width="800px" :close-on-click-modal="false"
		:modal-append-to-body="false" draggable @close="handleClose">
		<div style="display: flex;">
			<div style="width: 150px;">
				<div class="listtype" :class="curtype=='system'?'active':''" @click="curtype='system'">系统图标</div>
				<div class="listtype" :class="curtype=='scene'?'active':''" @click="curtype='scene'">场景</div>
			</div>
			<div class="rightbody">
				<div style="display: flex;justify-content: flex-start; flex-wrap: wrap;gap: 6px; ">
					<div class="icon-child" v-for="(item,index) in hotspots" :key="item.spotid"  @click="curSpotid=item.spotid">
						<img :id="'hotspot_img'+index" :src="item.url" class="ani" />
						<div style="position: absolute; top:3px; background-color: #000; font-size: 12px; padding: 2px 5px; border-radius:5px;" v-if="item.gif==1">GIF</div>
						<div style="position: absolute; bottom:2px; right:2px; font-size: 12px; border-radius:5px;color: #00aaff;" v-if="curSpotid==item.spotid"><el-icon size="24"><CircleCheckFilled/></el-icon></div>
					</div>
				</div>
			</div>
		</div>
		<div style="padding-top: 10px; display: flex; justify-content: flex-end;">
			<div style="margin-right: 10px;"><el-button type="info" @click="dialogVisible=false">取消</el-button></div>
			<div><el-button type="primary" @click="handleSave">确定</el-button></div>
		</div>
	</el-dialog>
</template>

<script>
	function getImageList() {
		console.log(123);
	}
	import request from '../../utils/request';
	export default {

		data() {
			return {
				curSpotid:-1,
				animtionTimer: null,
				curtype: 'system',
				dialogVisible: true,
				hotspots: [],
				animationImgList: [],
			}
		},
		methods: {
			init() {
				this.loadList();
				var _this = this;

				
				this.animtionTimer = setInterval(function() {
					for (var i = 0; i < _this.animationImgList.length; i++) {
						var obj = _this.animationImgList[i];
						obj.img.style.transform = "translateY(" + (-obj.h * obj.curframe) + "px)";
						if (obj.curframe >= obj.frames) {
							obj.curframe = 0;
						}
						obj.curframe++;
					}
				}, 100);
			},
			getImageList() {
				for (var i = 0; i < this.hotspots.length; i++) {
					var item = this.hotspots[i];
					var img = document.getElementById("hotspot_img" + i);
					if(img.naturalHeight/item.h>1){
						this.animationImgList.push({
							img: img,
							frames: img.naturalHeight / item.h,
							w: item.w,
							h: item.h,
							curframe: 0
						});
					}
				}
			},
 
			loadList() {
				request.post("/api/hotspot/list_system", this.formData).then(res => {
					if (res.status == 200 && res.data.code) {
						this.hotspots = res.data.list;
						setTimeout(this.getImageList, 100);
					}
				}).catch(err => {})
			},
			handleClose() {
				clearInterval(this.animtionTimer);
			},
			handleSave(){
				this.dialogVisible=false;
			}
		}
	}
</script>

<style scoped>
	.rightbody {
		background-color: #2a2a2a;
		width: 100%;
		height: 500px;
		overflow-y: auto;
		padding: 10px 10px;
	}

	.listtype {
		background-color: #141414;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin: 0px 0px 5px 0px;
		color: #afafaf;
		border-radius: 5px 0px 0px 5px;
		cursor: pointer;
	}

	.listtype:hover {
		background-color: #1e1e1e;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin: 0px 0px 5px 0px;
		color: #afafaf;
		border-radius: 5px 0px 0px 5px;
		cursor: pointer;
	}

	.listtype.active {
		background-color: #2a2a2a;
		height: 30px;
		text-align: center;
		color: #FFF;
		line-height: 30px;
		margin: 0px 0px 5px 0px;
		border-radius: 5px 0px 0px 5px;
		cursor: pointer;
	}

	.icon-child {
		background-color: #4c4c4c;
		margin: 5px 0px;
		position: relative;
		padding: 5px;
		width: 86px;
		height: 86px;
		overflow: hidden;
		border-radius: 5px;
	}
	.ani {
		overflow: hidden;
		width: 80px;
		height:80xp;
	}
</style>